<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/handlebars.min.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="./output.css">
</head>

<body>
    <div class="max-w-dm mx-auto bg-white p-6">
        <div>
            <div class="w-72 sm:w-96 px-8 sm:px-12 py-6 sm:py-8 mx-auto bg-white shadow">
                <div class="flex text-base items-center space-x-2">
                    <h4 class="text-base font-semibold text-slate-900">Contributors</h4>
                    <span class="text-xs rounded-full px-2 py-1 bg-slate-100 font-semibold text-slate-700">204</span>
                </div>
                <div class="mt-3 flex -space-x-2 overflow-hidden">
                    <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
                        src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80"
                        alt="">
                    <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
                        src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80"
                        alt="">
                    <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
                        src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2.25&amp;w=256&amp;h=256&amp;q=80"
                        alt="">
                    <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
                        src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80"
                        alt="">
                    <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
                        src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80"
                        alt="">
                    <img class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
                        src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80"
                        alt="">
                </div>
                <div class="mt-3 text-sm font-medium">
                    <a href="#" class="text-blue-500">+ 198 others</a>
                </div>
            </div>
        </div>
        <div>
            <nav class="flex justify-center space-x-4">
                <a href="/dashboard" class="font-bold px-3 py-2 text-slate-700 rounded-lg 
                    hover:bg-slate-100 hover:text-slate-900">Home</a>
                <a href="/team" class="font-bold px-3 py-2 text-slate-700 rounded-lg 
                    hover:bg-slate-100 hover:text-slate-900">Team</a>
                <a href="/projects" class="font-bold px-3 py-2 text-slate-700 rounded-lg 
                    hover:bg-slate-100 hover:text-slate-900">Projects</a>
                <a href="/reports" class="font-bold px-3 py-2 text-slate-700 rounded-lg 
                    hover:bg-slate-100 hover:text-slate-900">Reports</a>
            </nav>
        </div>
        <h2 class="w-full border-b border-solid  border-slate-800 ">
        </h2>

    </div>
    <script id="navage-template" type="text/x-handlebars-template">
        <div class="max-w-md mx-auto p-6">
        <nav class="flex justify-center space-x-4 bg-slate-200 ">
            {{#each  items  }}
                <a href="#{{ url}}"
                    class="rounded-lg px-3 py-2 
                    text-slate-700  font-semibold
                     hover:bg-slate-100 hover:text-slate-900">
                    {{title}}
                </a>
            {{/each}}
        </nav>
        </div>
    </script>

    <script>
        // 定义数据
        const renderPeople = () => {
            const items = [
                {
                    title: "Home",
                    url: "/dashboard"
                },
                {
                    title: "Team",
                    url: "/team"
                },
                {
                    title: "Projects",
                    url: "/projects"
                },
                {
                    title: "Reports",
                    url: "/reports"
                }
            ];
            const source = document.getElementById('navage-template').innerHTML;
            const template = Handlebars.compile(source);
            const html = template({ items });
            document.body.insertAdjacentHTML('beforeend', html);
        }

        document.addEventListener('DOMContentLoaded', function () {
            if (typeof Handlebars === 'undefined') {
                setTimeout(renderPeople, 100);
            } else {
                renderPeople();
            }
        });
    </script>


    <div class="max-w-md mx-auto p-6">
        <!-- Before extracting a custom class -->
        <button class="py-2 px-5 mx-10 my-2 bg-violet-500 text-white 
            font-semibold rounded-full shadow-md 
            hover:bg-violet-700 focus:outline-none 
            focus:ring focus:ring-violet-400 
            focus:ring-opacity-75">
            Save changes origin
        </button>

        <!-- After extracting a custom class -->
        <button class="btn-primary">
            Save changes
        </button>

        <div class="[--scroll-offset:56px] lg:[--scroll-offset:44px] [color:red]">
            1111
        </div>
        处理空格
        <div class="grid grid-cols-[1fr_500px_2fr]">
            处理
        </div>
        <div class="lg:dark:content-auto">
            utilities .content-auto
        </div>


    </div>
</body>

</html>